<template>
	<el-form :model="form" :rules="rules" ref='theForm'>
		<div class="question_title">
			<div class="question_titleindex" v-if='form.indexId'>
				<span>{{form.indexId}}、</span>
			</div>
			<div class="question_titlereal editor_box" v-html="form.question"></div>
			<div class="question_score" v-if="hasScore && form.score && !form.questionScore">（{{form.score}}分）</div>
			<div class="question_score" v-if="hasScore && form.score && form.questionScore">（{{form.score}}分，得{{form.questionScore}}分）</div>
		</div>
		<div class="question_options" v-if="form.striograph">
			<div class="file_showbutton">
				<i class="el-icon-success successColor"></i><span class="file_open" @click="openView()">查看影像</span>
			</div>
		</div>
		<div class="question_options">
			<el-radio-group v-model="form.userAnswer" @change="answerChange('SINGLE')" :disabled='readonly' v-if="form.questionType == 'SINGLE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-radio :label="letters[index]">
						<div class="question_optiontext">
							<span class="editor_letter">{{letters[index]}}.</span>
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-radio>
				</div>
			</el-radio-group>
			<el-checkbox-group v-model="form.userAnswers" @change="answerChange('MULTIPLE')" :disabled='readonly' v-if="form.questionType == 'MULTIPLE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-checkbox :label="letters[index]">
						<div class="question_optiontext">
							<span class="editor_letter">{{letters[index]}}.</span>
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-checkbox>
				</div>
			</el-checkbox-group>
			<el-radio-group v-model="form.userAnswer" @change="answerChange('SINGLE')" :disabled='readonly' v-if="form.questionType == 'JUDGE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-radio :label="item">
						<div class="question_optiontext">
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-radio>
				</div>
			</el-radio-group>
			<el-row v-if="form.questionType == 'ANALYSIS' && !readonly">
				<el-col :span="16">
					<el-input type="textarea" :rows="4" @input="answerChange('SHORT')" v-model="form.userAnswer" :disabled='readonly' placeholder="请输入答案"></el-input>
				</el-col>
			</el-row>
			<el-row v-if="form.questionType == 'SHORT' && !readonly">
				<el-col :span="16">
					<el-input type="textarea" :rows="4" @input="answerChange('SHORT')" v-model="form.userAnswer" :disabled='readonly' placeholder="请输入答案"></el-input>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="查看影像" class='view_dialog' :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' :visible.sync="viewDialog" width="1100px">
			<div class="view_box" v-if="viewDialog">
				<dcmviewmain :stuuid='viewstriograph' :isSimplify='false'></dcmviewmain>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="viewDialog = false;viewstriograph=''">确 定</el-button>
			</div>
		</el-dialog>
	</el-form>
</template>

<script>
	import dcmviewmain from '@/components/dcmviewmain.vue'
	export default {
		components: {
			dcmviewmain
		},
		props: {
			form: {
				type: Object,
				required: true,
				default: () => ({})
			},
			letters: {
				type: Array,
				required: true,
			},
			questionTypes: {
				type: Array,
				required: true,
			},
			readonly: {
				type: Boolean,
				required: false,
				default: false
			},
			hasScore: {
				type: Boolean,
				required: false,
				default: true
			}
		},
		data() {
			return {
				viewstriograph: '',
				viewDialog: false,
				rules: {
					userAnswer: [{
						required: true,
						message: '请填写答案'
					}],
				},
			}
		},
		created() {

		},
		methods: {
			openView() {
				this.viewstriograph = this.form.striograph;
				this.viewDialog = true
			},
			answerChange(type) {
				if(type == 'MULTIPLE') {
					var userAnswers = this.form.userAnswers;
					if(userAnswers && userAnswers.length > 0) {
						userAnswers = userAnswers.sort()
						this.form.userAnswer = userAnswers.join('')
					} else {
						this.form.userAnswer = ''
					}
				}
				if(this.form.userAnswer) {
					this.form.overed = true
					if(this.form.answer) {
						if(this.form.userAnswer == this.form.answer) {
							this.form.isError = '2'
						} else {
							this.form.isError = '1'
						}
					}
				} else {
					this.form.overed = false
					this.form.isError = ''
				}
				this.$emit('checkOver');
			},
		}
	}
</script>